<template>
    <div>
        <!-- coffee子项 -->
        <div class="box" v-for="obj in list" :key="obj.id">
            <div class="checkbox">
                <input type="checkbox" v-model="obj.isChecked">
            </div>
            <div class="img">
                <img :src="obj.img">
            </div>
            <div class="text">
                <p>{{ obj.name}}</p>
                <p>{{ obj.type}}</p>
            <select v-if="obj.option" v-model="obj.option">
                <option :value="obj.code" v-for="obj in options" :key="obj.code">{{ obj.text }}</option>
            </select>
                <p>{{ obj.price }}</p>
            </div>
            <div>
                <button @click="changeNum('add', obj.id)">+</button>
                {{ obj.num }}
                <button @click="changeNum('dec', obj.id, obj.num)">-</button>
            </div>
        </div>
    </div>
  </template>
  
  <script>

  export default {
    props: ['list'],
    data(){
        return{
            options:[{
                text: '削皮,切块',
                code: 'xp'
            },{
                text: '削皮,不切块',
                code: 'bqk' 
            },{
                text: '不削皮,不切块',
                code: 'bb'
            }]
        }
    },
    methods: {
        changeNum(type, id, num){
            if(type === 'dec' && num == 1){
                this.$emit('toDel', id)
            } else {
                this.$emit('changeNum', type, id)
            }
            
        }
    }
  }
  </script>
  
  <style scoped>
    .box {
        display: flex;
        align-items: center;
    }
    img {
        width: 50px;
    }
  </style>




